<template>
	<view class="index">
		<!-- 页面属性配置节点,类似html里的header标签。页面的背景色、原生导航栏的参数都可以写在page-meta里  uni-page-body上 -->
		<page-meta :page-style="pageStyle" />
		<!-- 自定义导航  -->
		<musichead title="主页" :back="false"></musichead>
		<!-- ↓ 底部播放器 -->
		<ThePlayerBottomBar />

		<view class="home fixed-top fixed-bottom">
			<!-- 搜索栏 -->
			
			
			<!-- ↓ 首页banner和入口栏 -->
			<view class="home-banner">
				<!-- banner -->
				<SectionBanner v-if="true" :list="homepage_banner.data" />

				<!-- 入口按钮 -->
				<SectionActionBall :data="actionBall" />
			</view>

			<!-- 用于排序 -->
			<view class="home-order-wrap">
				<!-- ↓ 分区 - 推荐歌单 -->
				<SectionPlaylist
					:style="{ order: homepage_block_playlist_rcmd.order }"
					v-if="homepage_block_playlist_rcmd && homepage_block_playlist_rcmd.list"
					title="推荐歌单"
					:data="{
						scrollList: homepage_block_playlist_rcmd.scrollList,
						list: homepage_block_playlist_rcmd.list
					}"
					@more="rcmdToMore"
				/>

				<!-- ↓ 分区 个性推荐单曲 -->
				<SectionSonglist
					:style="{ order: homepage_block_style_rcmd.order }"
					v-if="homepage_block_style_rcmd && homepage_block_style_rcmd.list"
					:title="homepage_block_style_rcmd.title"
					:data="{
						list: homepage_block_style_rcmd.list
					}"
				/>

				<!-- ↓ 分区 DJ专区 -->
				<!-- <section-songlist
			    :style="{ order: data.homepage_block_zone_dj.order }"
			    v-if="data.homepage_block_zone_dj?.list"
			    :title="data.homepage_block_zone_dj.title"
			    :data="{
			      list: data.homepage_block_zone_dj.list
			    }"
			  /> -->

				<!-- ↓ 分区 经典专区 -->
				<!-- <section-songlist
			    :style="{ order: data.homepage_block_zone_classic.order }"
			    v-if="data.homepage_block_zone_classic?.title"
			    :title="data.homepage_block_zone_classic.title"
			    :data="{
			      list: data.homepage_block_zone_classic.list
			    }"
			  /> -->
			</view>
			<view v-if="loading" class="loading-placeholder">加载中...</view>
		</view>
	</view>
</template>

<script>
//组件
// import musichead from '@/components/musichead/musichead.vue';
// import ThePlayerBottomBar from '@/components/ThePlayerBottomBar/ThePlayerBottomBar.vue';
// import SectionBanner from '@/components/section/SectionBanner.vue';

//处理首页数据的
import { getActionBtn, getHomePageHandler } from '@/common/requestHandler';

//接口
// import { topList } from '@/common/api.js';

export default {
	// components: { SectionBanner },
	data() {
		return {
			loading: true,
			offset: 0, //用于首页的懒加载
			more: true,
			// 是否正在请求所有数据，防止onReachBottom多次触发
			ifgetAllData: false,
			// 获取的原始blocks数据
			blocks: [],
			/**
			 * 主页action按钮
			 */
			actionBall: [],

			//防报错
			homepage_banner: {},
			homepage_block_playlist_rcmd: {},
			homepage_block_style_rcmd: {}
		};
	},
	//下拉刷新
	onPullDownRefresh() {
		// #ifndef H5
		uni.vibrateShort({
			fail: () => {}
		});
		// #endif
		// Object.assign(data, {
		// 	offset: 0,
		// 	more: true
		// });
		this.offset = 0,
		this.more = true;
		this.init();
	},
	// 触底加载
	onReachBottom() {
		// #ifndef H5
		uni.vibrateShort({
			fail: () => {}
		});
		// #endif
		if (!this.ifgetAllData) {
			this.getAllData();
		}
	},
	mounted() {
		this.init()
	},
	computed: {
		pageStyle() {
			return this.$store.getters['theme/getPageMetaStyle'];
		}
	},
	methods: {
		init(){
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const homePageConfig = this.$store.getters.getHomePageConfig;
			// console.log('取得首页信息', homePageConfig);
			
			this.$store.dispatch('getHomePage', this.offset).then((res) => {
				// 获取首页入口按钮数据 (可选登录)
				this.$store.dispatch('getHomeBall').then((res) => (this.actionBall = getActionBtn(res)));
				this.more = res.more;
				this.offset = res.offset;
			
				//数据加工
				const homePageRes = getHomePageHandler(res.data);
				const homePageResKeys = Object.keys(homePageRes);
			
				Object.keys(homePageConfig).forEach((key) => {
					if (homePageResKeys.includes(homePageConfig[key]?.code) && !homePageConfig[key].disable) {
						this[key] = Object.assign(homePageConfig[key], homePageRes[key]);
					}
				});
				console.log('最终结果', this);
			
				uni.hideLoading();
				uni.stopPullDownRefresh();
			});
		},
		
		
		handToList(event) {
			uni.navigateTo({
				url: '/pages/list/list?listId=' + event.currentTarget.dataset.id
			});
		},
		handleToSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		//下拉加载
		async getAllData() {
			this.ifgetAllData = true; //只加载一次
			const res = await this.$store.dispatch('getHomePage', this.offset);
			//todo 待完成
			//this.more = res.more
			console.log('hei', res);
			this.more = false;
			this.offset = res.offset;
			this.blocks.push(...res.data);
			if (this.more) {
				// 还有更多，继续加载
				this.getAllData();
			} else {
				//数据加工
				// 加载完了全部
				const homePageRes = getHomePageHandler(this.blocks);
				const homePageResKeys = Object.keys(homePageRes);

				//获取页面信息
				const homePageConfig = this.$store.getters.getHomePageConfig;
				Object.keys(homePageConfig).forEach((key) => {
					if (homePageResKeys.includes(homePageConfig[key]?.code) && !homePageConfig[key].disable) {
						this[key] = Object.assign(homePageConfig[key], homePageRes[key]);
					}
				});

				uni.hideLoading();
				this.blocks = [];
				this.loading = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	// 两边距
	--page-spacing: 32rpx;
	width: 100%;
	min-height: calc(100vh - var(--window-bottom));
	background: var(--theme-background-color);
	overflow: hidden;

	.home-banner {
		background: linear-gradient(var(--theme-background-color-card), var(--theme-background-color-card));
		overflow: hidden;
	}

	// 排序容器
	.home-order-wrap {
		display: flex;
		flex-direction: column;
	}

	.loading-placeholder {
		width: 100%;
		text-align: center;
		padding-top: 30rpx;
		box-sizing: border-box;
		background-color: transparent;
		height: calc(constant(safe-area-inset-bottom) + var(--player-height-custom));
		height: calc(env(safe-area-inset-bottom) + var(--player-height-custom));
		color: var(--theme-text-sub-color);
	}
}
</style>
